<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习笔记</title>
</head>
<body>
    <h2 id="return">目录</h2>

    <a href="#game">游戏</a><br>
    <a href="#gouwu">购物</a><br>
    <a href="#music">音乐</a><br>
    <a href="#list">表单</a>
    <!-- 锚点链接 -->

    <p id="game">游戏</p>
    <br>
    <br>
    <br>
    <a href="#return">返回顶部</a>
    <hr>

    <p id="gouwu">购物</p>
    <br>
    <br>
    <br>
    
    <a href="#return">返回顶部</a>
    <hr>

    <p id="music">音乐</p>
    <br>
    <br>
    <br>
    <a href="#return">返回顶部</a>
    <hr>

    <h3 id="list">2.表单:</h3>
    <!-- 表单可放在form也可不放 -->
    <form>
            
        <span> 账号:</span> <input type="text" value="" placeholder="请输入用户名" /> <br /> <!-- 这是文本框 -->
                    <!-- value会在学习后端之后用到 -->
           
       <span> 密码: </span><input type="password" value="" placeholder="请输入密码" /> <br />  <!-- 这是密码框 -->
                        <!-- placeholder="请输入密码" 这是提示语句 -->
        

        <!-- radio表示这是单选框 -->
        <span>性别:</span> 
            <label><input type="radio" name="sex" value="0" />男</label>
                    <!-- 只有name这里相同，让他们互斥，才能实现单选！否则可以选多个 -->
            <label><input type="radio" name="sex" value="1" />女</label> 
                    <!-- checked表示会默认选择一个选项 --> 
            <label> <input type="radio" name="sex" value="2" checked />保密</label>
            <br />


            <!-- 上传文件按钮 有multiple就可以上传多个文件-->
       <span>头像：</span> <input type="file" multiple><br />


        <textarea cols="30" rows="10"></textarea>
        <!-- 可用于一些介绍类的描述 -->
        <br />      
        
        <!--  checkbox 表示这是复选框  -->
        <span>爱好：</span> 
                <label> <input type="checkbox" name="sport" />篮球</label>
                <label> <input type="checkbox" name="sport" checked />足球</label>
                </label> <input type="checkbox" name="sport" checked />羽毛球</label>
                            <!-- checked表示会默认选择加了checked的选项 -->
                <label> <input type="checkbox" name="sport" />排球</label>
               <br />

        <span>城市：</span>
        <!-- select这里是下拉框 -->
        <select name="" id="">
            <!-- 加了multiple可以多选，如:<select name="" id="" multiple>，但是一般不这么写  -->
            <option value="550600">贵州</option>
            <!-- 对于城市，名字或许会改，但邮政编码不会，所以value一般存邮政编码 -->
            <option value="">四川</option>
            <option value="">重庆</option>
            <option value="" selected>云南</option>
            <!-- selected 默认选择该城市 如果多个都有selected 默认选择后者，如这里默认选择北京-->
            <option value="" selected>北京</option>
            <option value="">广西</option>
            <option value="">广东</option>
        </select>
            <br />

        <input type="button" value="登录" /> <!-- 登录按钮：不常用，几乎不用 -->

        <input type="submit" value="提交" /> <!-- 提交按钮：常用，一般都用这个 -->
        <input type="reset" value="重置" /> <!-- 重置按钮 -->

        <button>这也是按钮</button> <!-- 要学gs才有用 -->
    </form>

    <h3>3.嵌入其他网站的标签</h3>
    <iframe src="https://youhui.pinduoduo.com/" width="1920" height="600" >2</iframe>

</body>
</html>